<template>
    <view>
        <!-- pages/user/vip/index.wxml -->

        <!-- 头部 -->
        <navber id="head-navber" :navbarData="navbarData"></navber>

        <!-- 会员类型 -->
        <view class="waic">
            <view class="type" v-if="vipListIndex == index" v-for="(item, index) in vipList" :key="index">
                <view class="type-bac">
                    <image :src="imgUrl + '/imgs/user/vip/bac.png'"></image>
                </view>

                <view class="type-text">
                    <view class="type-text1">{{ item.level_name }}</view>
                    <view class="type-text2">{{ item.level_price }}元</view>
                </view>

                <view class="type-quan">
                    <view class="type-quan-fx">
                        <view class="type-quan-fx-img">
                            <image :src="imgUrl + '/imgs/user/vip/fx.png'"></image>
                        </view>
                        <view class="type-quan-fx-text">返现特权</view>
                    </view>
                    <view class="type-quan-yj">
                        <view class="type-quan-yj-img">
                            <image :src="imgUrl + '/imgs/user/vip/yj.png'"></image>
                        </view>
                        <view class="type-quan-yj-text">佣金特权</view>
                    </view>
                </view>
            </view>

            <view class="type-left" @tap="switch_index($event, { cz: '-' })" data-cz="-" v-if="vipListIndex > 0">
                <image :src="imgUrl + '/imgs/user/vip/left.png'"></image>
            </view>
            <view class="type-right" @tap="switch_index($event, { cz: '+' })" data-cz="+" v-if="vipListIndex < vipList.length - 1">
                <image :src="imgUrl + '/imgs/user/vip/right.png'"></image>
            </view>
        </view>

        <!-- 会员说明 -->
        <view class="detail">
            <view class="detail-title">会员权益说明</view>
            <view class="detail-item">1.凡在连锁店内一次性消费实付金额满5000元即可申请办理普卡一张；</view>
            <view class="detail-item">2.凡在连锁店内一次性消费实付金额满20000元或累计消费金额满50000元者即可申请办理银卡一张；</view>
            <view class="detail-item">
                3.会员卡不慎丢失或损坏，可到我司任意连锁店补办会员卡，并同时致电会员中心进行会员卡号更改，顾客档案，
                消费数据，积分金额，自动转入新卡档案中，系统中注销原有卡片信息。并免费为会员重新办理新会员卡。
            </view>
        </view>

        <!-- 立即加入 -->
        <view class="has-time" v-if="userInfo.member_level > 0">有效期至：{{ userInfo.member_date }}</view>
        <view class="add" @tap="add_vip" v-if="userInfo.member_level == 0">立即加入</view>
        <view class="add" @tap="add_vip" v-if="userInfo.member_date != '终生' && userInfo.member_level > 0">立即续费</view>
        <view class="end"></view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';
// pages/user/vip/index.js
const Config = require('../../../config/index.js');

const Api = require('../../../api/index.js');

const app = getApp();
export default {
    components: {
        navber
    },
    data() {
        return {
            navbarData: {
                title: '开通vip' //顶部标题
            },
            //导航栏
            imgUrl: Config.imgUrl,
            //图片url
            vipList: [],
            vipListIndex: 0,
            //默认下标0
            userInfo: {
                member_level: 0,
                member_date: ''
            }
        };
    },
    onShow() {
        this.getData();
    },
    methods: {
        switch_index(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //切换下标
            var cz = e.currentTarget.dataset.cz;
            var vipListIndex = this.vipListIndex;
            var lengths = this.vipList.length - 1;

            if (cz == '+') {
                if (vipListIndex + 1 >= lengths) {
                    vipListIndex = lengths;
                } else {
                    vipListIndex = vipListIndex + 1;
                }
            }

            if (cz == '-') {
                if (vipListIndex - 1 <= 0) {
                    vipListIndex = 0;
                } else {
                    vipListIndex = vipListIndex - 1;
                }
            }

            this.setData({
                vipListIndex: vipListIndex
            });
        },

        add_vip(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //加入vip
            var data = this.vipList;
            var index = this.vipListIndex;
            uni.navigateTo({
                url: '/pages/pay/show/index?vip_id=' + data[index].id + '&pay_type=member'
            });
        },

        getData() {
            Api.userVipList().then((res) => {
                this.setData({
                    vipList: res.data
                });
            }); // Api.userCore({}).then(res=>{
            //   if(res.code==1){
            //     this.setData({
            //       userInfo: res.data.userInfos,
            //     })
            //     app.globalData.popularize_code = res.data.userInfos.popularize_code;
            //   }
            // })
        }
    }
};
</script>
<style>
@import './index.css';
</style>
